<template>
  <div class="app-container">
    <el-form
      :show-message="!($route.query.isInfo || isInfo)"
      ref="elForm"
      :disabled="$route.query.isInfo || isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">内审核查内审明细</h2>
      <h4 class="form-header h4">内部审核</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="内审计划" prop="innerAuditPlanId">
            <el-select
              v-model="formData.innerAuditPlanId"
              placeholder="请选择内审计划"
              clearable
              @change="changeSupp"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in planList"
                :key="index"
                :label="item.element"
                :value="item.innerAuditPlanId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">
        内审结果安排
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >增行</el-button
        >
        <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        >
      </h4>
      <el-table
        :data="formData.innerCheckItems"
        :border="true"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column label="条款" width="200" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`innerCheckItems.${scope.$index}.orderContent`"
              :rules="rules.orderContent"
            >
              <el-cascader
                :props="{ value: 'innerCheckContentSettingId', label: 'type' }"
                :ref="'orderRef' + scope.$index"
                placeholder="请选择条款"
                :style="{ width: '100%' }"
                @change="changeOrder($event, scope.$index)"
                v-model="scope.row.orderContent"
                :options="listcheckContent"
              ></el-cascader>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="内容"
          min-width="600"
          prop="content"
          align="center"
        >
        </el-table-column>
        <el-table-column label="审核部门" min-width="200" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`innerCheckItems.${scope.$index}.userId`"
              :rules="rules.userId"
            >
              <el-cascader
                :props="{ value: 'id', checkStrictly: true }"
                :show-all-levels="false"
                :ref="'reference' + scope.$index"
                placeholder="请选择部门"
                :style="{ width: '100%' }"
                v-model="scope.row.deptId"
                :options="deptOptions"
              ></el-cascader>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="内审结果" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`innerCheckItems.${scope.$index}.result`"
              :rules="rules.result"
            >
              <el-input
                v-model="scope.row.result"
                placeholder="请输入内审结果"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="内审记录" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`innerCheckItems.${scope.$index}.log`"
              :rules="rules.log"
            >
              <el-input
                v-model="scope.row.log"
                placeholder="请输入内审记录"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" v-if="btnShow">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!($route.query.isInfo || isInfo)"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import { selectList } from "@/api/quality/inAudit";
import { listcheckContentSetting } from "@/api/quality/checkContentSetting.js";
import {
  checkItemAdd,
  updategcheckItem,
  checkItemInfo,
} from "@/api/quality/checkItem.js";

export default {
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      postOptions: [],
      formData: {
        innerAuditPlanId: "",
        innerCheckItems: [
          {
            orderContent: "",
            content: "",
            deptName: "",
            deptId: "",
            result: "",
            log: "",
          },
        ],
      },
      rules: {
        innerAuditPlanId: [
          {
            required: true,
            message: "请选择内审计划",
            trigger: "change",
          },
        ],
        orderContent: [
          {
            required: true,
            message: "请选择内审条款",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        result: [
          {
            required: true,
            message: "请输入内审结果",
            trigger: "blur",
          },
        ],
        log: [
          {
            required: true,
            message: "请输入内审记录",
            trigger: "blur",
          },
        ],
      },
      userList: [],
      deptId: [],
      deptOptions: [],
      planList: [],
      listcheckContent: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    if (this.$route.query.planId) {
      this.formData.innerAuditPlanId = this.$route.query.planId;
    }

    this.getDeptTree();
    this.getPlan();
    this.listcheckContentSetting();
  },
  mounted() {},
  methods: {
    changeOrder(e, i) {
      this.formData.innerCheckItems[i].content =
        this.$refs["orderRef" + i].getCheckedNodes()[0].data.content;
    },

    handleAdd() {
      this.formData.innerCheckItems.push({
        result: "",
        userId: "",
        userName: "",
      });
    },
    handleDele() {
      if (this.formData.innerCheckItems.length == 1) return;
      this.formData.innerCheckItems.pop();
    },

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    getPlan() {
      selectList().then((response) => {
        this.planList = response.data;
      });
    },
    listcheckContentSetting() {
      listcheckContentSetting().then((response) => {
        this.listcheckContent = this.handleTree(
          response.data,
          "innerCheckContentSettingId"
        );
      });
    },
    getinfo() {
      checkItemInfo(this.$route.query.id || this.id).then((response) => {
        this.formData = response.data;
        this.formData.userIdIn = response.data.userList.map((e) => e.userId);
        console.log(this.formData.userIdIn);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.innerCheckItems.forEach((e, i) => {
            e.innerAuditPlanId = this.formData.innerAuditPlanId;
            query.innerCheckItems[i].deptId =
              this.$refs["reference" + i].getCheckedNodes()[0].value;
            query.innerCheckItems[i].deptName =
              this.$refs["reference" + i].getCheckedNodes()[0].label;

            query.innerCheckItems[i].orderContent =
              this.$refs["orderRef" + i].getCheckedNodes()[0].value;
            query.innerCheckItems[i].content =
              this.$refs["orderRef" + i].getCheckedNodes()[0].label;
          });
          if (this.formData.innerCheckItemId != undefined) {
            updategcheckItem(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            checkItemAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
